{% extends "dashboard/base.html" %}

{% load category_tags %}
{% load dashboard_tags %}
{% load i18n %}
{% load staticfiles %}

{% block styles %}
    {% if use_less %}
        <link rel="stylesheet/less" type="text/css" href="{% static "oscar/less/dashboard.less" %}" />
    {% else %}
        <link rel="stylesheet" type="text/css" href="{% static "oscar/css/dashboard.css" %}" />
    {% endif %}
{% endblock %}

{% block extrastyles %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "oscar/js/select2/select2.css" %}" />
    <link rel="stylesheet" href="{% static "oscar/css/select2-bootstrap.css" %}" />
    <link rel="stylesheet" href="{% static "oscar/js/bootstrap-datetimepicker/bootstrap-datetimepicker.css" %}" />
    <link rel="stylesheet" href="{% static "oscar/css/datetimepicker.css" %}" />
{% endblock %}

{% block title %}
    {% trans "Dashboard" %} | {{ block.super }}
{% endblock %}

{% block layout %}
    {% block navbar %}
    <nav class="navbar navbar-static-top navbar-inverse navbar-accounts">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-accounts">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <span class="navbar-brand">{{ shop_name }}</span>
            </div>
            <div class="collapse navbar-collapse nav-accounts">
                <ul class="nav navbar-nav navbar-right">
                    <li><span>{% trans "Welcome" %} <em>{{ user.get_full_name|default:request.user.email }}</em></span></li>
                    <li><a href="{{ homepage_url }}"><i class="icon-home"></i> {% trans "Return to site" %}</a></li>
                    <li><a href="{% url 'customer:summary' %}"><i class="icon-user"></i> {% trans "Account" %}</a></li>
                    <li><a href="{% url 'customer:logout' %}"><i class="icon-signout"></i> {% trans "Log out" %}</a></li>
                </ul>
            </div>
        </div><!-- /navbar-inner -->
    </nav><!-- /navbar -->
    {% endblock navbar %}

    {% block dashboard_nav %}
        {% dashboard_navigation user as nav_items %}

        <nav class="navbar navbar-static-top navbar-inverse navbar-primary">
            <div class="container-fluid dashboard">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-primary">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <div class="collapse navbar-collapse nav-primary">
                    <ul class="nav navbar-nav dashboard">
                        {% for item in nav_items %}
                        <li class="dropdown">
                            {% if item.is_heading %}
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                {% if item.icon %}<i class="{{ item.icon }}"></i>{% endif %}
                                {{ item.label }} <b class="caret"></b>
                            </a>
                            {% else %}
                            <a href="{{ item.url }}">
                                {% if item.icon %}<i class="{{ item.icon }}"></i>{% endif %}
                                {{ item.label }}
                            </a>
                            {% endif %}
                            {% if item.has_children %}
                            <ul class="dropdown-menu">
                                {% for subitem in item.children %}
                                <li>
                                    <a href="{{ subitem.url }}">
                                    {% if subitem.icon %}<i class="{{ subitem.icon }}"></i>{% endif %}
                                    {{ subitem.label }}
                                    </a>
                                </li>
                                {% endfor %}
                            </ul>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </nav>
    {% endblock %}

    <div class="container-fluid dashboard">
        {% block breadcrumbs %}
        <ul class="breadcrumb">
            <li><a href="{% url 'dashboard:index' %}">{% trans "Dashboard" %}</a></li>
        </ul>
        {% endblock %}

        <div class="content">
            {% include 'dashboard/partials/alert_messages.html' %}
            {% block header %}
            <div class="page-header action">
                <h1>{% block headertext %}{% endblock %}</h1>
            </div>
            {% endblock %}
            <div class="page-content">
                {% block content %}
                    {% block dashboard_content %}{% endblock dashboard_content %}
                {% endblock content %}
            </div>
        </div>
    </div><!-- /container -->

    {% comment %}
        This block includes a single pixel from one of the django-oscar
        organisation's servers. It's included to keep track of which sites are
        running Oscar in production, and what versions of Python and Django are
        used. This provides useful data when deciding which versions of Python
        and Django to support.

        You are, of course, welcome to remove this tracker. To do so, set
        OSCAR_TRACKING=False in your settings.
    {% endcomment %}
    {% block trackerimage %}
        {% if call_home %}
            <img src="//analytics.oscarcommerce.com/tracker.gif?{{ call_home }}" style="display:none" />
        {% endif %}
    {% endblock %}
{% endblock %}

{# Local scripts #}
{% block scripts %}
    <!-- Twitter Bootstrap -->
    <script type="text/javascript" src="{% static "oscar/js/bootstrap3/bootstrap.min.js" %}"></script>
    <!-- Oscar -->
    <script src="{% static "oscar/js/oscar/ui.js" %}" type="text/javascript" charset="utf-8"></script>
{% endblock %}

{% block extrascripts %}
    {{ block.super }}

    {# jQuery plugins #}
    <script src="{% static "oscar/js/mousewheel/jquery.mousewheel.min.js" %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static "oscar/js/bootstrap-datetimepicker/bootstrap-datetimepicker.js" %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static "oscar/js/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.all.js" %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static "oscar/js/inputmask/jquery.inputmask.bundle.min.js" %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static "oscar/js/select2/select2.js" %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static "oscar/js/oscar/dashboard.js" %}" type="text/javascript" charset="utf-8"></script>

    {# We don't use a fallback for tinyMCE as it dynamically loads several other files #}
    <script src="//cdn.tinymce.com/4/tinymce.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdn.tinymce.com/4/jquery.tinymce.min.js" type="text/javascript" charset="utf-8"></script>

{% endblock %}

{% block onbodyload %}
    {{ block.super }}
    options = {
      'languageCode': '{{ LANGUAGE_CODE }}'
    };
    oscar.dashboard.init(options);
{% endblock %}
